<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="入库单列表"
      row-key="id"
      :indent="20"
      :columns="columns"
      :request-api="getStockinList"
      :init-param="initParam"
    >
      <template #date="{ row }">
        <span>{{ row.date?.slice(0, 10) }}</span>
      </template>
      <!-- :request-api="getStockinList" 自定义表格发请求 -->
      <template #tableHeader>
        <el-button v-auth="'add'" type="primary" :icon="CirclePlus" @click="toCreate(0)"> 新增入库单 </el-button>
      </template>
      <template #orderNo="scope">
        <el-button type="primary" text @click="toCreate(scope.row.id)">{{ scope.row.orderNo }}</el-button>
      </template>
      <!-- 自定义根据prop的字段来编写插槽名字 -->
      <template #operation="scope">
        <!-- checkFlag审核状态：0 待提交.1.已审核 （这部分要有采购单可以直接收货）待提交状态才能显示-->
        <!-- <el-button
          v-auth="'confirm'"
          v-if="!scope.row.checkFlag"
          type="primary"
          link
          :icon="FolderChecked"
          @click="onConfirmRow(scope.row)"
        >
          确认
        </el-button> -->
        <!-- <el-button
          v-if="scope.row.checkFlag"
          v-auth="'close'"
          type="primary"
          link
          :icon="FolderDelete"
          @click="onCloseRow(scope.row)"
        >
          关闭
        </el-button> -->
        <el-button
          v-if="!scope.row.checkFlag"
          v-auth="'edit'"
          type="primary"
          link
          :icon="EditPen"
          @click="toCreate(scope.row.id)"
        >
          编辑
        </el-button>
        <!-- 查看 -->
        <el-button v-if="scope.row.checkFlag" type="primary" link :icon="EditPen" @click="toCreate(scope.row.id)">
          查看
        </el-button>
        <el-button
          v-if="!scope.row.checkFlag"
          v-auth="'delete'"
          type="primary"
          link
          :icon="FolderDelete"
          @click="onDeleteRow(scope.row)"
        >
          删除
        </el-button>

        <el-button
          v-auth="'cancel'"
          v-if="scope.row.checkFlag"
          type="primary"
          link
          :icon="Delete"
          @click="onCancelRow(scope.row)"
        >
          反审核
        </el-button>
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="tsx" name="warehousing">
import { Inventory } from "@/api/interface";
import { cancelStockin, deleteStockin, getStockinList, getSupplierList } from "@/api/modules/inventory"; // confirmStockin 确认收货api
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { useHandleData } from "@/hooks/useHandleData";
import { getLastQuarterDays } from "@/utils/date";
import { formatDate } from "@/utils/date-formatter";
import { warehouseStatus } from "@/utils/serviceDict";
import { CirclePlus, Delete, EditPen, FolderDelete } from "@element-plus/icons-vue"; // FolderChecked 确认小图标
import { onBeforeUpdate, ref } from "vue";
import { useRoute, useRouter } from "vue-router";

const proTable = ref<ProTableInstance>();
const initParam = ref({ orderType: 1 });
const router = useRouter();
const route = useRoute();
// 跳转详情页面
const toCreate = (id?: number) => {
  if (id !== 0) {
    router.push({
      path: "/procure/warehousingEdit",
      query: {
        id: id
      }
    });
  } else {
    router.push(`/procure/warehousingEdit`);
  }
};
const columns: ColumnProps<Inventory.ResPurchaseList>[] = [
  {
    type: "index",
    label: "序号",
    search: {
      el: "date-picker",
      label: "单据日期",
      key: "timeValue",
      order: 1,
      defaultValue: [formatDate(-getLastQuarterDays(), "start", "yyyy-MM-dd"), formatDate(0, "end", "yyyy-MM-dd")],
      props: {
        type: "datetimerange",
        format: "YYYY-MM-DD",
        valueFormat: "YYYY-MM-DD"
      }
    },
    width: 60
  },
  {
    sortable: true,
    prop: "date",
    label: "入库日期",
    minWidth: 150,
    enum: [
      { label: "入库日期查询", value: 1 },
      { label: "创建时间查询", value: 2 }
    ],

    // enum: timeType, // enum格式化内容，在utils里面有定义好的enum类型数据
    // search 配置是否可以通过上面搜索框搜索到数据
    search: {
      el: "select",
      label: "日期类型",
      key: "timeType",
      order: 0,
      defaultValue: 2
    },
    align: "center"
  },
  { sortable: true, prop: "orderNo", label: "单据编号", minWidth: 200, search: { el: "input" } },
  // {    sortable: true, prop: "orderType", label: "单据类型", minWidth: 120, enum: orderType, align: "left" },
  {
    sortable: true,
    prop: "supplierName",
    label: "供应商",
    minWidth: 120,
    enum: () => getSupplierList({ pageNum: 1, pageSize: 9999 }),
    align: "center",
    search: { el: "select", key: "supplierId" },
    fieldNames: { label: "name", value: "id" },
    isFilterEnum: false
  },
  // {    sortable: true, prop: "", label: "仓库", enum: deliveryStatus, align: "" },
  { sortable: true, prop: "itemCount", label: "物品（项）", align: "center", width: 130 },
  { sortable: true, prop: "amount", label: "金额", align: "center" },

  {
    sortable: true,
    prop: "checkFlag",
    label: "单据状态",
    minWidth: 120,
    enum: warehouseStatus,
    align: "center",
    search: { el: "select", key: "checkFlag" }
  },
  {
    sortable: true,
    prop: "createTime",
    label: "创建时间",
    minWidth: 164,
    align: "center"
  },
  // {    sortable: true, prop: "submitterId", label: "提交人", minWidth: 120, align: "", search: { el: "input" } },
  { sortable: true, prop: "remark", label: "备注", minWidth: 180, align: "center", search: { el: "input" } },
  { prop: "operation", label: "操作", width: 220, fixed: "right" }
];

// 关闭入库单，，以后再做：api：closeStockin icon：FolderDelete
//  const onCloseRow = async (params: Inventory.ResPurchaseList) => {
//   await useHandleData(closeStockin, { id: params.id }, `关闭编号【${params.orderNo}】入库单`);
//   proTable.value?.getTableList();
// };

// const onConfirmRow = async (params: Inventory.ResPurchaseList) => {
//   await useHandleData(confirmStockin, { id: params.id }, `确认编号【${params.orderNo}】入库单`);
//   proTable.value?.getTableList();
// };
// 撤销
const onCancelRow = async (params: Inventory.ResPurchaseList) => {
  await useHandleData(cancelStockin, { id: params.id }, `反审核编号【${params.orderNo}】入库单`);
  proTable.value?.getTableList();
};

// 删除
const onDeleteRow = async (params: Inventory.ResPurchaseList) => {
  await useHandleData(deleteStockin, { id: params.id }, `删除编号【${params.orderNo}】入库单`);
  proTable.value?.getTableList();
};

onBeforeUpdate(() => {
  if (route.query.upList) {
    proTable.value?.getTableList();
  }
});
</script>
